<script setup lang="ts">
import BgmPlayer from '@/component/BgmPlayer/BgmPlayer.vue'
import SETTING_ICON from './setting.png'
import { Ref, ref } from 'vue'
import SettingModal from '@/views/action/setting/SettingModal.vue'
import { bgm, bgmToggle, bgmVolume } from '@/assets/global.ts'

const settingRef: Ref<SettingModal> = ref(null)
</script>

<template>
  <div class="action-view">
    <BgmPlayer
      class="action-item"
      v-model:active="bgmToggle"
      :bgm="bgm"
      :volume="bgmVolume"
    ></BgmPlayer>
    <img class="action-item" :src="SETTING_ICON" alt="" @click="settingRef.open()"/>
    <SettingModal ref="settingRef"/>
  </div>
</template>

<style scoped>
.action-view {
  padding: 20px;
  position: absolute;
  bottom: 32px;
  right: 20px;
  opacity: 0;
  transition: 300ms;
  display: flex;
  flex-direction: column;
  gap: 12px;

  &:hover {
    opacity: 0.6;
  }

  .action-item {
    position: relative;
    width: 60px;
    height: 60px;
    cursor: pointer;
  }
}
</style>